<template>
    <el-dialog :title="details.title" :visible.sync="showDialog" width="30%" :showStatus="showStatus"
    @close="$emit('update:showStatus', false)" style="">
        <div centered>
        {{handleContent()}}
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button :size="button.size" @click="handleCancel">{{$t("rangeStatus.cancel")}}</el-button>
            <el-button type="primary" :size="button.size" @click="handleSubmit">{{$t("rangeStatus.ok")}}</el-button>
        </span>
    </el-dialog>
</template>


<script>
export default {
    name: 'StatusRange',
     props: {
        showStatus: {
            type: Boolean,
            default: false
        },
        title: {
            type: String
        },
        details: {
            type: Object
        }
    },
    data() {
        return {
            showDialog: this.showStatus,
            button: {
                size: 'small'
            },
            formLabelWidth: '100px'
        }
    },
    methods: {
        handleContent() {
            return this.$t('rangeStatus.content_body')
        },
        handleSubmit(){
            let data = {
                id: this.details.range.id,
                range_code: this.details.range.range_code,
                status: (this.details.range.status === 1 ? 0 : 1),
                action: this.details.action
            }
            this.$emit('ok', data)
            this.$emit('update:showStatus', false)
            this.showDialog = false
        },       
        handleCancel() {
            this.showDialog = false
        }
    },
    watch: {
      showChange() {
        this.showDialog = this.showStatus
      }
    }
}
export const enRangeStatus = { 
    //Actions
    ok: 'OK',
    cancel: 'Cancel',

    //Dialogue
    content_body: 'Do you want to change the status of this range?',
    content: 'Are you sure to close this dialog?'
    
}

export const zhRangeStatus = { 
    //Actions
    ok: '好',
    cancel: '取消',
    //Dialogue
    content_body: '是否要更改此范围的状态?',
    content: '你确定要关闭这个对话框?'
}
</script>
